<template>
  <div>
    <!-- accordion 属性来设置是否以手风琴模式显示。 -->
    <el-collapse accordion v-model="activeNames">
      <el-collapse-item title="班级" name="1">
        <el-button size="small" type="primary" @click="dialogFormVisible = true"
          >增加</el-button
        >
        <div class="table-father">
          <el-table :data="tableData" border style="width: 250px">
            <el-table-column prop="className" label="班级" align="center">
            </el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <span @click="handleClick(scope.row)" type="text" size="small"
                  >删除</span
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="echarts" id="class"></div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      title="增加班级"
      :visible.sync="dialogFormVisible"
      class="dialog"
      width="40%"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        @submit.native.prevent
      >
        <el-form-item
          label="班级"
          :label-width="formLabelWidth"
          prop="className"
        >
          <el-input
            v-model="form.className"
            autocomplete="off"
            size="small"
            @keyup.enter.native="submitForm('form')"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')" size="small"
            >确定</el-button
          >
          <el-button @click="dialogFormVisible = false" size="small"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      activeNames: ["1"],
      form: {
        className: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
      rules: {
        className: [
          { required: true, message: "请输入班级", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getAxios();
    this.initCharts();
  },
  methods: {
    //删除
    handleClick(row) {
      this.$confirm("确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setTimeout(() => {
            this.deleteClass(row.classId);
          }, 500);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //提交表单
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          setTimeout(() => {
            this.addClass();
            this.dialogFormVisible = false;
            this.resetForm(form);
          }, 500);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields();
    },

    //初始化数据
    getAxios() {
      this.$axios.get("/class/list").then((res) => {
        const data = res.data.data.classes;
        this.tableData = data;
        this.tableData.forEach((item) => {
          item.className = item.className + "班";
        });
      });
    },

    //新增班级
    addClass() {
      this.$axios
        .post("/class/add", {
          className: this.form.className,
        })
        .then((res) => {
          const code = res.data.code;
          if (code == 500) {
            this.$notify.error({
              message: "已存在该班级",
              duration: 2000,
              showClose: true,
            });
          } else if (code == 200) {
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000,
            });
            this.getAxios();
          }
        });
    },

    //删除班级
    deleteClass(classId) {
      this.$axios.delete("/class/delete/" + classId).then(() => {
        this.$notify({
          message: "删除成功",
          type: "success",
          duration: 2000,
          showClose: true,
        });
        this.getAxios();
      });
    },

    initCharts() {
      // 初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("class"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "各班级人数",
        },
        tooltip: {},
        xAxis: {
          data: ["851802", "851803", "851804", "851805", "851806"],
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            type: "bar",
            data: [55, 46, 53, 65, 42,58],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
//深度选择器，去除默认的padding
.el-table {
  /deep/ th {
    height: 30px;
    padding: 0;
  }
  /deep/ td {
    height: 5rem;
    // line-height: 5rem;
    padding: 0;
  }
}
.el-button {
  margin-bottom: 1rem;
}
span {
  cursor: pointer;
  color: #409eff;
}
.el-input {
  width: 50%;
}
//让dialog出现在屏幕正中间
.dialog {
  /deep/.el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 10px);
    max-width: calc(100% - 10px);
    height: 35% !important;
    font-size: 0.5rem;
  }
  /deep/.el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
}
.table-father {
  width: 100%;
  float: left;
  position: relative;
}
.echarts {
  width: 600px;
  height: 280px;
  position: absolute;
  top: 10px;
  right: 50px;
}
</style>